<template>
  <content-box :title="title" :tips="tips" :remark="remark">
    <q-table
      :data="tableData" :columns="columns"
      row-key="id" class="scroll myTable-line rank-table full-width no-last-bor inherit"
      style="max-width: 100%"
      :style="{'max-height': `${hasPermission ? '304px' : '632px'}`}"
      :loading="loading"
      :hide-bottom="!!tableData.length" :pagination="{rowsPerPage: 0}">
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td key="rank" :props="props">
            <div v-if="props.row.index > 3" class="text-center rank-index">{{ props.row.index }}</div>
            <img v-else :src="'statics/img/'+(props.row.index) +'.png'" class="img-h" alt="">
          </q-td>
          <q-td key="device" :props="props">{{ props.row.device }}</q-td>
          <q-td key="percent" :props="props">{{ props.row.percent }}</q-td>
        </q-tr>
      </template>
    </q-table>
  </content-box>
</template>

<script>
import contentBox from './content-box'
import { getDeviceRate } from 'src/boot/status-monitor/status-overview'
import { mapGetters } from 'vuex'
export default {
  name: 'ranking-list',
  components: {
    contentBox
  },
  props: {
    hasPermission: Boolean
  },
  data () {
    return {
      title: '当班时间开动率排行榜',
      loading: false,
      tableData: [], // table数据
      columns: [
        { name: 'rank', align: 'left', label: '当前排名', field: 'rank', check: true },
        { name: 'device', align: 'left', label: '设备', field: 'device', check: true },
        { name: 'percent', align: 'left', label: '时间开动率', field: 'percent', check: true, style: 'width: 80px' }
      ]
    }
  },
  computed: {
    ...mapGetters(['statusList']),
    tips () {
      return `当班设备时间开动率 = 设备实际${this.statusList[0].label}时长/当班内计划工作时长`
    },
    remark () {
      return [
        `设备开动率按照公式（当班设备开动率 = 设备实际${this.statusList[0].label}状态总时长 / 当班内计划工作总时长）`,
        '设备未产生加工状态时长时，统一显示0.00%'
      ]
    }
  },
  methods: {
    // 清空数据
    clearData () {
      this.tableData = []
    },
    // 重构设备开动率数据
    initRankTableData (params, workshopId, lineId) {
      this.loading = true
      lineId !== 'all' && (params['lineId'] = lineId)
      getDeviceRate(params, workshopId).then(res => {
        let tableData = []
        if (res.length) {
          tableData = res.map((item, index) => {
            return {
              ...item,
              index: index + 1,
              device: `${this.$utils.label(item.deviceName)}(${this.$utils.label(item.assetNumber)})`,
              percent: (item.operatingRate * 100).toFixed(2) + '%'
            }
          })
        }
        this.tableData = tableData
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.round{
  display inline-block
  vertical-align middle
  width 14px
  height 14px
  line-height 14px
  border-radius 7px
  margin-right 10px
}

.rank-table{
  $td-h = 48px
  tbody tr{
    &:first-child, &:nth-child(2), &:nth-child(3){
      background-color #fff
      &:hover{
        background-color #cfd6fe
      }
    }
    &:first-child td, &:nth-child(2) td, &:nth-child(3) td{
      position sticky
      z-index 5
    }
  }
}

@media (max-width $breakpoint-md-max){
  .img-h {
    height $td-md-height - 10
    margin-top 5px
  }
  .rank-index{
    width 25px
  }
  .rank-table tbody tr{
    &:first-child td{
      top $td-md-height
    }
    &:nth-child(2) td{
      top $td-md-height * 2
    }
    &:nth-child(3) td{
      top $td-md-height * 3
    }
  }
}
@media (min-width $breakpoint-lg-min) and (max-width $breakpoint-lg-max){
  .img-h {
    height $td-lg-height - 14
    margin-top 7px
  }
  .rank-index{
    width 25px
  }
  .rank-table tbody tr{
    &:first-child td{
      top $td-lg-height
    }
    &:nth-child(2) td{
      top $td-lg-height * 2
    }
    &:nth-child(3) td{
      top $td-lg-height * 3
    }
  }
}
@media (min-width $breakpoint-xl-min){
  .img-h {
    height $td-xl-height - 16
    margin-top 8px
  }
  .rank-index{
    width 27px
  }
  .rank-table tbody tr{
    &:first-child td{
      top $td-xl-height
    }
    &:nth-child(2) td{
      top $td-xl-height * 2
    }
    &:nth-child(3) td{
      top $td-xl-height * 3
    }
  }
}
</style>
